<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <div class="search">
        <div class="search">
          <div style="display: flex;">
            <div class="whead">
              <div class="left">鱼苗编号 :</div>
              <el-input
                v-model="input"
                @change="btnchange(input)"
                style="width: 240px;"
                placeholder="鱼苗编号"
              >
              </el-input>
            </div>
            <div class="whead">
              <div class="left">鱼苗名称 :</div>
              <el-input
                v-model="fishName"
                @change="fishNameChang(fishName)"
                style="width: 240px;"
                placeholder="鱼苗名称"
              >
              </el-input>
            </div>
            <div class="whead">
              <div class="left">启用状态 :</div>
              <el-select
                v-model="staty"
                placeholder="全部"
                @change="statusChange(staty)"
              >
                <el-option
                  v-for="item in statu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <el-button type="primary" @click="btnSearch">搜索</el-button>
            </div>
            <div style="margin-left: 10px;">
              <el-button type="primary" @click="dialogFormVisibles()"
                >添加渔苗</el-button
              >
            </div>
          </div>
        </div>
        <div>
          <el-dialog
            :title="title"
            :visible.sync="dialogFormVisible"
            @close="closeClick"
          >
            <div>
              <el-form :model="form">
                <el-form-item label="鱼苗名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    autocomplete="off"
                    @change="seedlingClick(form.name)"
                    style="width: 240px;"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="鱼苗介绍语" :label-width="formLabelWidth">
                  <el-input
                    v-model="blurb"
                    autocomplete="off"
                    @change="blurbclick(blurb)"
                    style="width: 240px;"
                  ></el-input>
                </el-form-item>
                <el-form-item label="成熟期" :label-width="formLabelWidth">
                  <el-select
                    v-model="form.ripe"
                    @change="ripeClick(form.ripe)"
                    style="width: 240px;"
                  >
                    <el-option
                      v-for="item in ripe"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="鱼苗初始重量"
                  :label-width="formLabelWidth"
                >
                  <el-select
                    v-model="form.weight"
                    @change="weightClick(form.weight)"
                    style="width: 240px;"
                  >
                    <el-option
                      v-for="item in numDatas"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-divider></el-divider>
                <div style="margin-left: 50px; font-weight: 700;">成长周期</div>
                <div>
                  <div v-infinite-scroll="fishgrow.length">
                    <div
                      v-for="item in fishgrow"
                      :key="item.id"
                      style="display: flex;"
                    >
                      <div style=" font-weight: 700;">
                        鱼苗重量:{{ item.weight }}kg, 生长速度 : &nbsp;
                      </div>
                      <el-select
                        style="width: 240px;"
                        v-model="item.speed"
                        @change="growChange(item)"
                      >
                        <el-option
                          v-for="item in numData"
                          :key="item.id"
                          :label="item.name"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <div style="margin: 0 237px;">
                      <el-button @click="fishBtn(from)" type="primary"
                        ><i class="el-icon-plus"></i>
                      </el-button>
                    </div>
                  </div>
                </div>
                <el-divider></el-divider>
                <div>
                  <div>
                    鱼苗图片
                  </div>
                  <el-form>
                    <el-form-item prop="file">
                      <el-upload
                        class="upload-demo"
                        ref="upload"
                        multiple
                        action=""
                        accept="image/jpg,image/jpeg,image/png"
                        :http-request="httpRequest"
                        :auto-upload="false"
                        :on-remove="handleRemove"
                        :before-upload="beforeAvatarUpload"
                        :on-preview="handlePictureCardPreview"
                      >
                        <el-button slot="trigger" size="small" type="primary"
                          >选取文件</el-button
                        >
                        <el-button
                          style="margin-left:5px"
                          size="small"
                          type="primary"
                          @click="submitUploadList"
                          >上传
                        </el-button>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="" />
                      </el-dialog>
                    </el-form-item>
                  </el-form>
                  <div v-if="dialogImageUrl">
                    <img
                      width="40%"
                      height="40%"
                      :src="dialogImageUrl"
                      alt=""
                    />
                  </div>
                </div>
              </el-form>
              <el-divider></el-divider>
              <div slot="footer" class="dialog-footer">
                <span v-if="show">
                  <el-button type="primary" @click="addfish"
                    >确定添加</el-button
                  >
                </span>
                <span v-if="shows">
                  <el-button type="primary" @click="fryInfoUpdate"
                    >确定编辑</el-button
                  >
                </span>

                <el-button @click="dialogFormVisible = fsalse">取 消</el-button>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/查询数据列表.png"
            alt=""
          />
        </div>
        <div>
          数据列表
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table border :data="listData" style="width: 100%" align="center">
          <el-table-column
            prop="fryNo"
            label="鱼苗编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="鱼苗名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="img"
            label="鱼苗照片"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-popover placement="top-start" trigger="click">
                <!--trigger属性值：hover、click、focus 和 manual-->
                <a
                  :href="scope.row.image"
                  target="_blank"
                  title="查看最大化图片"
                >
                  <img
                    :src="scope.row.image"
                    style="width: 200px;height: 200px"
                  />
                </a>
                <img
                  slot="reference"
                  :src="scope.row.image"
                  style="width: 80px;height: 80px; cursor:pointer"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="initWeight"
            label="鱼苗初始化重量"
            align="center"
          ></el-table-column>
          <el-table-column label="成熟期" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.maturePeriod }}个月</div>
            </template>
          </el-table-column>
          <el-table-column label="启用状态" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enableStatus"
                :active-value="0"
                :inactive-value="1"
                @change="
                  updateEnableStatus(scope.row.enableStatus, scope.row.id)
                "
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <div class="slot">
                <el-button
                  type="primary"
                  size="small"
                  @click="editClick(scope.row.id)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="removeClick(scope.row.id)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px; ">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  fryInfo,
  updateEnableStatus,
  uploadFileToOss,
  addFryInfo,
  fryInfoGetFryById,
  fryInfoUpdate,
  fryInfoRemove
} from "@/api/user";
import { Toast } from "vant";
import { log } from "console";
export default {
  data() {
    return {
      show: false,
      shows: false,
      id: "", //鱼苗id
      dialogImageUrl: "", //鱼苗图片
      fileData: [],
      dialogVisible: false,
      fishgrow: [{ weight: 0.5, speed: 0 }],
      dialogVisible: false,
      input: "", //搜索
      fishName: "", //鱼苗名称搜索
      principal: "", //负责人搜索
      city: "", //城市搜索
      staty: "", //水库状态
      loading: false,
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: 1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      listData: [],
      enableStatus: "", //	启用状态 0.启用 1.禁用
      fryName: "", //鱼苗名称
      fryNo: "", //鱼苗编号
      dialogFormVisible: false,
      form: {
        name: "",
        introduce: "",
        ripe: "",
        weight: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      growthCycleList: [], //成长周期
      numData: [
        { id: 1, value: 0.01, name: "0.01kg/月" },
        { id: 2, value: 0.02, name: "0.02kg/月" },
        { id: 3, value: 0.03, name: "0.03kg/月" },
        { id: 4, value: 0.04, name: "0.04kg/月" },
        { id: 5, value: 0.05, name: "0.05kg/月" },
        { id: 6, value: 0.06, name: "0.06kg/月" },
        { id: 7, value: 0.07, name: "0.07kg/月" },
        { id: 8, value: 0.08, name: "0.08kg/月" },
        { id: 9, value: 0.09, name: "0.09kg/月" },
        { id: 10, value: 0.1, name: "0.10kg/月" },
        { id: 12, value: 0.12, name: "0.12kg/月" },
        { id: 13, value: 0.13, name: "0.13kg/月" },
        { id: 14, value: 0.14, name: "0.14kg/月" },
        { id: 15, value: 0.15, name: "0.15kg/月" },
        { id: 16, value: 0.16, name: "0.16kg/月" },
        { id: 17, value: 0.17, name: "0.17kg/月" },
        { id: 18, value: 0.18, name: "0.18kg/月" },
        { id: 19, value: 0.19, name: "0.19kg/月" },
        { id: 20, value: 0.2, name: "0.20kg/月" }
      ],
      numDatas: [
        { id: 1, value: 0.1, name: "0.1kg" },
        { id: 2, value: 0.2, name: "0.2kg" },
        { id: 3, value: 0.3, name: "0.3kg" },
        { id: 4, value: 0.4, name: "0.4kg" },
        { id: 5, value: 0.5, name: "0.5kg" },
        { id: 6, value: 0.6, name: "0.6kg" },
        { id: 7, value: 0.7, name: "0.7kg" },
        { id: 8, value: 0.8, name: "0.8kg" },
        { id: 9, value: 0.9, name: "0.9kg" },
        { id: 10, value: 1.0, name: "1.0kg" }
      ],
      ripe: [
        { id: 1, value: 1, name: "1个月" },
        { id: 2, value: 2, name: "2个月" },
        { id: 3, value: 3, name: "3个月" },
        { id: 4, value: 4, name: "4个月" },
        { id: 5, value: 5, name: "5个月" },
        { id: 6, value: 6, name: "6个月" },
        { id: 7, value: 7, name: "7个月" },
        { id: 8, value: 8, name: "8个月" },
        { id: 9, value: 9, name: "9个月" },
        { id: 10, value: 10, name: "10个月" },
        { id: 11, value: 11, name: "11个月" },
        { id: 12, value: 12, name: "12个月" },
        { id: 13, value: 13, name: "13个月" },
        { id: 14, value: 14, name: "14个月" },
        { id: 15, value: 15, name: "15个月" },
        { id: 16, value: 16, name: "16个月" },
        { id: 17, value: 17, name: "17个月" },
        { id: 18, value: 18, name: "18个月" },
        { id: 19, value: 19, name: "19个月" },
        { id: 20, value: 20, name: "20个月" },
        { id: 21, value: 21, name: "21个月" },
        { id: 22, value: 22, name: "22个月" },
        { id: 23, value: 23, name: "23个月" },
        { id: 24, value: 24, name: "24个月" },
        { id: 25, value: 25, name: "25个月" },
        { id: 26, value: 26, name: "26个月" },
        { id: 27, value: 27, name: "27个月" },
        { id: 28, value: 28, name: "28个月" },
        { id: 29, value: 29, name: "29个月" },
        { id: 30, value: 30, name: "30个月" },
        { id: 31, value: 31, name: "31个月" },
        { id: 32, value: 32, name: "32个月" },
        { id: 33, value: 33, name: "33个月" },
        { id: 34, value: 34, name: "34个月" },
        { id: 35, value: 35, name: "35个月" },
        { id: 36, value: 36, name: "36个月" }
      ],
      formLabelWidth: "120px",
      form: {
        code: "",
        name: ""
      },
      value: "",
      options: [],
      blurb: "", //简介
      nameInfo: "", //鱼苗名称
      maturePeriod: "", //成熟期
      initWeight: "", //鱼苗初始重量
      statu: [
        {
          value: 0,
          label: "启用"
        },
        {
          value: 1,
          label: "禁用"
        }
      ],
      title: "添加鱼苗"
    };
  },
  created() {
    this.fryInfo(this.pageSize, this.currentPage);
  },
  methods: {
    async httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let formData = new FormData(); // FormData 对象
      formData.append("file", fileObj); // 文件对象
      let result = await uploadFileToOss(formData);
      if (result.code == 0) {
        this.dialogImageUrl = result.data;
      }
    },
    submitUploadList() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      this.dialogImageUrl = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.name;
      this.dialogVisible = true;
    },
    // 限制图片大小
    beforeAvatarUpload(file) {
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt500Kb = file.size / 1024 < 500;
      if (!isJPEG && !isJPG && !isPNG) {
        this.$message.error("上传文件只能是图片格式!");
      }
      if (!isLt500Kb) {
        this.$message.error("上传鱼米图片大小不能超过500KB!");
      }
      return (isJPEG || isJPG || isPNG) && isLt500Kb;
    },
    //删除
    async removeClick(e) {
      this.$confirm("此操作删除鱼苗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let data = {
            id: e
          };
          let result = await fryInfoRemove(data);
          if (result.code == 0) {
            this.fryInfo(this.pageSize, this.currentPage);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 编辑
    async editClick(e) {
      this.id = e;
      this.title = "编辑鱼苗";
      this.show = false;
      this.shows = true;
      this.dialogFormVisible = true;
      // 根据id查找鱼苗信息
      let data = {
        id: e
      };
      let result = await fryInfoGetFryById(data);
      if (result.code == 0) {
        this.blurb = result.data.blurb;
        this.fishgrow = JSON.parse(result.data.growthCycle);
        this.dialogImageUrl = result.data.image;
        this.form.weight = result.data.initWeight;
        this.form.ripe = result.data.maturePeriod;
        this.form.name = result.data.name;
        this.growthCycleList = JSON.parse(result.data.growthCycle);
      }
    },
    // 添加鱼苗按钮
    dialogFormVisibles() {
      this.show = true;
      this.shows = false;
      this.dialogFormVisible = true;
      this.fishgrow = [{ weight: 0.5, speed: 0 }];
    },
    // 跟新鱼苗信息
    async fryInfoUpdate() {
      let data = {
        blurb: this.blurb,
        growthCycleList: this.growthCycleList,
        image: this.dialogImageUrl,
        initWeight: this.form.weight,
        maturePeriod: this.form.ripe,
        name: this.form.name,
        id: this.id
      };
      let result = await fryInfoUpdate(data);
      if (result.code == 0) {
        this.fryInfo();
        this.dialogFormVisible = false;
        setTimeout(() => {
          Toast.success(result.message);
        }, 1000);
      }
    },
    // 添加鱼苗
    async addfish(e) {
      let data = {
        blurb: this.blurb,
        growthCycleList: this.growthCycleList,
        image: this.dialogImageUrl,
        initWeight: this.form.weight,
        maturePeriod: this.form.ripe,
        name: this.form.name
      };
      let result = await addFryInfo(data);
      if (result.code == 0) {
        this.fryInfo();
        this.dialogFormVisible = false;
        this.$router.go(0);
        setTimeout(() => {
          Toast.success(result.message);
        }, 1000);
      }
    },
    // 鱼苗初始重量
    weightClick(e) {
      this.form.weight = e;
      console.log("初始重量", this.form.weight);
    },
    // 成熟器
    ripeClick(e) {
      this.form.ripe = e;
      console.log("初始重量", this.form.ripe);
    },
    // 鱼苗名称
    seedlingClick(e) {
      this.form.name = e;
    },
    // 鱼苗介绍
    blurbclick(e) {
      this.blurb = e;
    },
    // 获取添加数据
    growChange(e) {
      if (e) {
        this.growthCycleList.push({ speed: e.speed, weight: e.weight });
   
      }
    },
    // 点击增加
    fishBtn(from) {
      this.numData;
      this.fishgrow.push({
        // id: this.fishgrow.lenght + 1,
        weight: 0.5 + this.fishgrow.length * 0.5,
        speed: 0
      });
    },
    async fryInfo(limit, page) {
      let params = {
        enableStatus: this.enableStatus,
        fryName: this.fishName,
        fryNo: this.fryNo,
        limit: this.pageSize,
        page: this.currentPage
      };
      let result = await fryInfo(params);
      if (result.code == 0) {
        this.listData = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
        result.data.records.forEach(element => {
          this.options.push({ name: element.name, code: element.cityCode });
        });
      }
    },
    // 关闭对话框时触发
    closeClick() {
      this.blurb = "";
      this.growthCycleList = "";
      this.dialogImageUrl = "";
      this.form.weight = "";
      this.form.ripe = "";
      this.form.name = "";
      this.fishgrow = "";
    },
    // 更新水库状态
    async updateEnableStatus(e, id) {
      let data = {
        id: id,
        enableStatus: e
      };
      let result = await updateEnableStatus(data);
      if (result.code == 0) {
        Toast.success("修改水库状态成功");
      } else {
        Toast.fail("修改水库状态失败,请稍后再试");
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fryInfo(this.pageSize, this.currentPage);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fryInfo(this.pageSize, this.currentPage);
    },
    //  鱼苗编号
    btnchange(e) {
      this.fryNo = e;
      this.fryInfo(this.pageSize, this.currentPage);
    },
    //鱼苗名称
    fishNameChange(e) {
      this.fishName = e;
      this.fryInfo(this.pageSize, this.currentPage);
    },

    // 状态搜索
    statusChange(e) {
      this.enableStatus = e;
      this.fryInfo(this.pageSize, this.currentPage);
    },
    // 搜索按钮
    btnSearch(e) {
      this.fryInfo(this.pageSize, this.currentPage);
    },
    // 跳转到添加水库页面
    addEvent() {
      this.$router.push("addReservoir");
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: center;
}
::v-deep .el-dialog {
  position: relative;
  margin: 0 auto 0px;
  background: #ffffff;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  height: 80%;
}
::v-deep .el-dialog__body {
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  max-height: 85% !important;
  min-height: 80%;
  overflow-y: auto;
  //如需设置滚动条样式
  &::-webkit-scrollbar {
    width: 2px;
    background-color: #ccc;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #0ae;
  }
  &::-webkit-scrollbar-track {
    background-color: #ccc;
  }
}
.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}
.left {
  margin-right: 10px;
}
::v-deep .el-dialog__footer {
  padding: 10px 20px 20px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::v-deep .search[data-v-1c1a5e1d] {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 80px;
  margin: 0 20px;
}

::v-deep .el-upload-list--picture .el-upload-list__item {
  overflow: hidden;
  z-index: 0;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 10px 10px 90px;
  height: 92px;
  width: 100px;
}

::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  // display: flex;
  align-items: center;
  // height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}
</style>
